<template>
    <div class="cart_control">
        <transition name="move">
            <div class="iconfont icon--jian " v-if="food.count" @click.stop="updateFoodCount(false)"></div>
        </transition>
        <div class="count" v-if="food.count">{{food.count}}</div>
        <div class="iconfont icon--jia" @click.stop="updateFoodCount(true)"></div>

    </div>
</template>

<script>
    export default {
        name: "CartControl",
        data(){
            return {

            }
        },
        props:{
            food:Object,
        },
        methods:{
            updateFoodCount(isAdd){
               // let qq=this.food;调用这个也可以，理解是堆中指向同一个对象
                this.$store.dispatch('updateFoodCount',{isAdd,food:this.food})
            }
        },
        mounted(){
            //let food=this.food;
           // this.$set(food,"qq",8);
            console.log("这个是第"+this.$route.params.id+"家店铺，本条由cartControl打印");
            // let aa={name:"小明",age:18};
            //     var bb=aa;
            //     bb.age=19;
            //     console.log(aa)




        }
    }
</script>

<style lang="stylus" scoped>
.cart_control
    height:0.4rem
    max-width:1.5rem
    display:flex
    align-items:center
    float:right

    .count
        //flex:1

        display:inline-block
        width:0.8rem
        line-height:0.4rem
        font-size:0.3rem
        text-align:center
    .iconfont
        display:inline-block
        width:0.4rem
        height:0.4rem
        border-radius:0.2rem
        background:green
        font-size:0.4rem
        line-height:0.4rem
        color:#fff
        text-align:center

    .icon--jian
        background:red
        &.move-enter-active, &.move-leave-active
            transition: all 0.2s
        &.move-enter, &.move-leave-to
            opacity:0
            transform: translateX(15px)  rotate(180deg)
    .icon--jia
        float:right


</style>
<!--&.move-enter-active, &.move-leave-active-->
<!--transition all .3s-->
<!--&.move-enter, &.move-leave-to-->
<!--opacity 0-->
<!--transform translateX(15px) rotate(180deg)-->
